<template>
    <div class="ads-dtData-content">
        <div class="scoll-view"  v-if="requestOver">
            <div class="ads-left-con">
                <div class="place-view1" :style="{backgroundImage:'url('+dtData.headerImageUrl+')'}">
                    <!-- <img :src="dtData.adArImg" /> -->
                    <!-- <i class="stars" /> -->
                    <div class="btnVideo" @click="btnVideo(dtData.videoUrl||dtData.headerImageUrl)">
                        <div class="btnadd" v-if="dtData.videoUrl"></div>
                    </div>
                </div>
            </div>
            <div class="ads-right-con">
                <div class="name"> {{dtData.name}}</div>
                 <div class="city-name"> {{dtData.subtitle}}</div>
                  <div class="pricelocation">
                    <div class="price">
                        <span><img src="/images/bicon1.png" alt=""></span> 
                        <b>{{dtData.transactionAmount?.decimalFourString}}</b>
                         <span style="color: #ffffff50;"> ≈${{dtData.transactionPrice?.decimalFourString}}</span>
                    </div>
            </div>
                <div class="user-view"> 
                    <!-- v-if="chainInfo" -->
                        <div class="item" :style="{width:'100%'}" v-if="dtData.userName">
                            <div class="title" v-t="'prop.text3'">TITLE HOLDING</div>
                            <div class="dtname">{{dtData.userName}}</div>
                        </div>
                        <!-- <div class="line"></div> -->
                        <!-- <div class="item" :style="{width:styleCss?'100%':'48%'}" v-if="chainInfo.contractAddress">
                            <div class="title">EARNINGS HOLDING</div>
                            <div class="dtname">{{formatAddress(chainInfo.contractAddress)}}</div>
                        </div> -->
                </div>
                <div class="max-title" v-t="'prop.text4'">Prop visits</div>
                <div class="ads-visits-box">
                    <uv-pv-visits :id="dtData.arPropId ||dtData.propTemplateId" visitType='7'/>
                </div>
                <div class="btn-view">
                     <!-- <div class="btn-views"  @click="btnPreView"></div> -->
                     <!-- 铸造NFT -->
                     <div :class="'btn-setUp '+lang" v-if="userInfo.walletAddress==dtData.ownerAddress && dtData.bornId==null" @click="btnSetUp"></div>
                     <!-- 出售 -->
                    <!-- <div class="chushou-btn" v-if="userInfo.walletAddress==dtData.ownerAddress && dtData.bornId" >
                         <my-button text='Sell'  :styleType="2" @click="saleSetFlag=true"/>
                            <set-goods-sale v-if="saleSetFlag" @close="saleSetFlag=false" :bornid="dtData.bornId"/>
                        </div> -->
                </div>
                <!-- <template v-if="type==2">
                    <user-ads-con :detail='dtData'/>
                </template>
                <template v-else>
                    <released ref="addView" v-if="dtData.placeStatus==2" :detail='dtData'/>
                    <not-released ref="addView" v-else :detail='dtData'/>
                </template> -->
            </div>
        </div>
         <!-- <div class="btn-add" @click="btnAdd"></div> -->
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance ,onMounted,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Title from '@/components/title.vue'
import twoTitle from '@/components/twoTitle.vue'
import imgBox from '@/components/imgBox.vue'
import chainInfo from '@/components/chainInfo.vue'
import propVisits from './propVisits.vue'
import uvPvVisits from '@/components/uvPvVisits.vue'
import { toast,H5CallAPPFuction } from '@/utils/common'
import setGoodsSale from '@/views/collection/components/setGoodsSale.vue'
import { useI18n } from 'vue-i18n'
export default {
    components:{
       Title,
       twoTitle,
       imgBox,
       chainInfo,
       propVisits,
       uvPvVisits,
       setGoodsSale
    },
    props:{
        detail:Object,
        id:'',
        propTemplateId:''
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t,locale} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            showFlag:false,
            showFlag2:false,
            requestOver:false,
            saleSetFlag:false,
            dtData: null,
            lang:locale.value || 'en'
        })
        onMounted(()=>{
            if(props.id){
                store.dispatch('ad/get_prop_detail',props.id).then(res=>{
                        state.dtData = res
                        state.requestOver = true
                })

                store.dispatch('base/add_visit_object',{
                objectId:props.id,
                visitTypeCode:parseInt(7),
                walletAddress:state.userInfo.walletAddress
                    }).then(res =>{
                 })
            }
        })
        
         const btnVideo = (url)=>{
            console.log("appParams:",{resourceUrl:url})
            try {
                H5CallAPPFuction('showVideo',JSON.stringify({resourceUrl:url})) 
            } catch (error) {
                toast('调用app播放失败')
            }
        }
        const btnPreView = ()=>{
            console.log("appParams:",state.dtData)
            try {
                H5CallAPPFuction('previewProp',JSON.stringify(state.dtData)) 
            } catch (error) {
                toast('调用app失败')
            }
        }
        const btnSetUp = ()=>{
            console.log("appParams:",state.dtData)
            try {
              H5CallAPPFuction('showCasting',JSON.stringify(state.dtData)) 
            } catch (error) {
                toast('调用app失败')
            }
        }


        return{
            ...toRefs(state),
            btnVideo,
            btnPreView,
            btnSetUp
        }
    }
}
</script>

<style lang="scss" scoped>
    .ads-dtData-content{
        display: flex;
        width: 100%;
        height: 85%;
        line-height: normal;
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
        margin-top:50px;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        // overflow: hidden;
        // overflow-x: auto;
        .scoll-view{
             display: flex;
            overflow-x: auto;
            -webkit-overflow-scrolling:touch;
            width: 100%;
           height: 100%;
        }
        .introduce{
            padding: 14px 0 15px 0;
            font-size:24px;
            &.introduce2{
                padding-bottom: 20px;
            }
        }
                  .stars{
                        width: 32px;
                        height: 32px;
                        background: url(/images/gloabAdSplace/stars.png) left top no-repeat;
                        background-size: 100% 100%;
                        position: absolute;
                        top:10px;
                        left:10px;
                        z-index:99;
                }
        .pricelocation{
            display: flex;
            align-items: center;
            .price{
                flex: 1;
                img{
                    display: block;
                    float: left;
                    height:30px;
                    margin: 3px 10px 0 0;
                }
                b{
                    font-weight: 500;
                    color: #82FEF4;
                }
            }
            .location{
                i{
                    float: left;
                    font-size: 30px;
                    margin: 3px 10px 0 0;
                }
            }
        }
        .name{
            display: flex;
            align-items: center;
            font-size: 32px;
            span{
                display: block;
                height:34px;
                text-align: center;
                line-height: 34px;
                padding: 0 10px;
                background: rgba(103,248,255,0.2);
                border-radius: 17px;
                opacity: 1;
                border: 1px solid rgba(103,248,255,0.8);
                font-size: 14px;
                font-family: Poppins-Medium, Poppins;
                font-weight: 500;
                color: #67F8FF;
                margin: 0 0 0 12px;
            }
        }
        .ads-visits-box{
            margin: 10px 0 20px 0;
            padding: 0 0 20px 0;
        }
        .ads-left-con{
            overflow: hidden;
            overflow-y: auto;
            padding: 20px;
            width: 440px;
            background-image: url(/images/gloabAdSplace/bg1.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .max-title{
                font-size:26px;
                color: #fff;
                padding-top:20px;
            }
            .name{
                color: #67F8FF;
                font-weight:600;
            }
            .place-view1{
                display: flex;
                justify-content: flex-start;
                align-self: center;
                align-items: center;
                height:100%;
                padding:0 6px;
                margin: 0;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                position: relative;
                .btnVideo{
                    height:70px;
                    width:100px;
                    position: absolute;
                    top:50%;
                    left:50%;
                    margin-top:-35px;
                    margin-left:-50px;
                    border-radius:20px;
                    background-color: #00000070;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-self: center;
                    padding-left:20px;
                }
                .btnadd{
                       width: 0;
                        height: 0;
                        border-top: 20px solid transparent;
                        border-right: 20px solid transparent;
                        border-bottom: 20px solid transparent;
                        border-left: 20px solid #67F8FF;

                }
            }
        }
        .ads-right-con{
            width: 800px;
            padding: 20px;
            margin-left:30px;
            overflow: hidden;
            overflow-y: auto;
             background-image: url(/images/gloabAdSplace/bg2.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
               .city-name{
                  color: #ffffff50;
                  font-size:24px;
                  padding:10px 0;
                   img{
                    height:20px;
                  }
            }
          .max-title{
                font-size:26px;
                color: #fff;
                padding-top:10px;
            }
            .name{
                  color: #fff;
                  font-size:28px;
                  padding-top:10px;
            }
        .user-view{
                display: flex;
                justify-content: space-between;
                position: relative;
                margin-top:10px;
                .line{
                    position: absolute;
                    width:1px;
                    height:60px;
                    left:50%;
                    top:50%;
                    margin-left:-5px;
                    margin-top:-30px;
                }
                .item{
                    width:48%;
                     padding: 5px 0;
                    text-align: center;
                      background-color: #67F8FF50;
                   // background: rgba(103,248,255,0.2000);
                    border:1px solid #67F8FF;
                }
                .title{
                    font-size:20px;
                    color:#ffffff50;
                }
                .dtname{
                    font-size:24px;
                    color:#67F8FF;
                }
        }
        .chushou-btn{
                width: 220px;
            }
        .btn-view{
            display: flex;
            justify-content: flex-start;
            .btn-setUp,
            .btn-views{
                width: 160px;
                height:60px;
                background-image: url(/images/detail/preview.png);
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin:0 20px 0 0;
            }
            .btn-setUp{
                background-image: url(/images/detail/nfts.png);
                 width: 200px;
                 &.zh{
                    background-image: url(/images/detail/nfts-zh.png);
                 }
            }
        }
    }
}

    .chain-info-dg-box{
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        .chain-info-wrap{
            position: relative;
            z-index: 100;
            width: 700px;
            height: 90%;
            overflow: hidden;
            background: url(/images/dtData/hb.png) left top no-repeat;
            background-size: 100% 100%;
            background-color: #023178;
            border-radius:40px ;
            padding: 90px 20px 40px 20px;
            .close{
                position: absolute;
                z-index: 100;
                right: 30px;
                top: 30px;
                font-size: 40px;
                color: #67F8FF;
            }
            .ciScrollBox{
                height: 100%;
                overflow: hidden;
                overflow-y: auto;
            }
        }
    }
    .propVisitsDgWrap{
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;
        padding: 0 20px;
        .propDgTitle{
            height: 60px;
            line-height: 60px;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 30px;
            em{
                font-style: normal;
                color: #7EE7FF;
                font-weight: 700;
            }
        }
        .propVisitsDgMain{
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
  .btn-add{
             background-image: url(/images/add.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width:180px;
            height:60px;
            position: absolute;
            bottom:20px;
            left: 720px;
            z-index:999;
        }
</style>